<script setup lang="ts">
import F_list, {type filterGroupType} from "@/components/admin/f_list.vue";
import {aiRoleListApi, type aiRoleType, type aiRoleUpdateUserType} from "@/api/ai_role_api";
import type {columnType} from "@/components/admin/f_list.vue";
import {reactive, ref} from "vue";
import F_ai_role_create from "@/components/common/f_ai_role_create.vue";
import {aiRoleRemoveApi} from "@/api/ai_role_api";
import {Message} from "@arco-design/web-vue";
import F_ai_role_order_modal from "@/components/common/f_ai_role_order_modal.vue";
import F_avatar from "@/components/common/f_avatar.vue";
const columns: columnType[] = [
  {title: "ID", dataIndex: 'id'},
  {title: "角色名称", dataIndex: 'title'},
  {title: "角色头像", slotName: 'avatar'},
  {title: "标签", dataIndex: 'category'},
  {title: "介绍", slotName: 'abstract'},
  {title: "会话数", dataIndex: 'sessionCount'},
  {title: "对话数", dataIndex: 'chatCount'},
  {title: "提示词", slotName: 'prompt'},
  {title: "是否在角色广场", dataIndex: 'isSquare', type: "switch"},
  {title: "创建时间", dataIndex: 'createdAt', type: "date"},
  {title: "操作", slotName: 'action'},
]

const visible = ref(false)
const fListRef = ref()

function ok() {
  fListRef.value.getList()
}

async function remove(id: number) {
  const res = await aiRoleRemoveApi(id)
  if (res.code) {
    Message.error(res.msg)
    return
  }
  Message.success(res.msg)
  fListRef.value.getList()
}
const detail = reactive<aiRoleUpdateUserType>({
  title: "",
  avatar: "",
  category: "",
  abstract: "",
  prompt: "",
  roleID: 0,
})

function edit(record: aiRoleType) {
  detail.roleID = record.id
  detail.title = record.title
  detail.avatar = record.avatar
  detail.category = record.category
  detail.abstract = record.abstract
  detail.prompt = record.prompt
  detail.isSquare = record.isSquare
  visible.value = true
}
function add() {
  detail.roleID = 0
  detail.title = ""
  detail.avatar = ""
  detail.category = ""
  detail.abstract = ""
  detail.prompt = ""
  visible.value = true
}

const aiRoleOrderVisible = ref(false)
const aiOrderDetail = reactive({
  roleID: 0,
  type: 0,
  title: "",
})

function showAiRoleOrderCreate(record: aiRoleType, type: number) {
  aiRoleOrderVisible.value = true
  aiOrderDetail.roleID = record.id
  aiOrderDetail.type = type // 推荐
  aiOrderDetail.title = record.title
}


</script>

<template>
  <div>
    <f_ai_role_create :detail="detail" type="user" @ok="ok" v-model:visible="visible"></f_ai_role_create>
    <f_ai_role_order_modal v-model:visible="aiRoleOrderVisible" v-model:detail="aiOrderDetail"></f_ai_role_order_modal>
    <f_list
        ref="fListRef"
        :url="aiRoleListApi"
        :params="{type: 3}"
        add-form-label="创建角色"
        edit-form-label="更新角色信息"
        edit-label="更新"
        no-batch-delete
        no-check
        @edit="edit"
        no-default-delete
        @add="add"
        :columns="columns">
      <template #action_left="{record}: {record: aiRoleType}">
        <a-button type="primary" status="success" @click="showAiRoleOrderCreate(record, 1)" v-if="!record.isSquare">
          角色推荐
        </a-button>
      </template>
      <template #avatar="{record}:{record: aiRoleType}">
        <f_avatar :title="record.title" :image-url="record.avatar" :size="40"></f_avatar>
      </template>
      <template #prompt="{record}:{record: aiRoleType}">
        <a-typography-text style="width: 200px" :ellipsis="{rows: 2, css: true}">{{ record.prompt }}</a-typography-text>
      </template>
      <template #abstract="{record}:{record: aiRoleType}">
        <a-typography-text style="width: 200px" :ellipsis="{rows: 2, css: true}">{{
            record.abstract
          }}
        </a-typography-text>
      </template>
      <template #action_delete="{record}: {record: aiRoleType}">
        <template v-if="record.isSquare">
          <a-button @click="showAiRoleOrderCreate(record, 3)" type="primary" status="danger">删除</a-button>
        </template>
        <template v-else>
          <a-popconfirm @ok="remove(record.id)" content="确定要删除该记录吗？">
            <a-button type="primary" status="danger">删除</a-button>
          </a-popconfirm>
        </template>

      </template>

    </f_list>
  </div>
</template>

<style lang="less">

</style>